<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>34 - Ajax 请求</title>
</head>
<body>
    <!-- 引入第三方 jQuery 库 (jQuery 库就是一个 js 文件) -->
    <script src="./lib/jquery.js"></script>
    <!-- 引入第三方 jQuery 库 (jQuery 库就是一个 js 文件) -->
    <script src="./lib/axios.js"></script>

    <script>

        // 1. jQuery 实现 Ajax 请求语法:
        $.ajax({
            //设置请求方式
            type: '请求方式',
            // 设置请求地址
            url: '请求的url地址',
            // 获取服务端响应结果
            success: function(形参) {
                // 形参就是保存了服务端响应的数据
            }
        });





        // 2. axios 实现 Ajax 请求语法:
        axios({
            // 设置请求方式
            method: '请求方式',
            // 设置请求地址
            url: '请求地址',
        }).then(function(形参){
            // 形参保存的就是服务端响应的数据结果
        });





        // 2.1. axios 设置查询参数
        axios({
            //设置请求方式
            method: '请求方式',
            url: '请求地址',
            // 添加查询参数: 检索数据条件
            params: {
                键: 值,
                键: 值
            }
        }).then(function() {
            // 获取响应结果
        });





        // 2.2. post 请求
        axios({
            method: 'post',
            url: '请求地址',
            // 请求体(数据体)
            // 用来保存向服务端增加的数据(向服务端增加哪些数据都写到data中)
            data: {
                键: 值,
                键: 值
            }
        }).then(function(res){
            // 获取服务端响应结果
        });





        // a)  get 请求侧重点在于获取数据
        // b)  get 请求中设置查询参数, 查询参数数据会拼接到 url 地址后面, 按照固定格式拼接 (xxxx地址?键=值 & 键 = 值) 
        // c)  get 请求中查询参数可以设置也可以不设置, 如果要设置, 查询参数中的键不能自己定义


        // a)  post 请求侧重点在于向服务端增加数据
        // b)  post 请求必须设置请求体 (data)
        // c)  post 请求, 请求体数据不会拼接到 url 地址后面, 请求体数据中的键, 不能随便乱写










    </script>
</body>
</html>